<template>
	<div class="container">
		<!-- 头部搜索区域 -->
		<div class="search">
			<el-form>
				<el-form-item>
					<el-button type="success" size="mini" @click="addMemberBox = true">添加会员</el-button>
				</el-form-item>
			</el-form>
			<el-form :inline="true">
				<el-form-item>
					<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="keyword"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" size="mini" @click="getMember">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-popover placement="bottom" title="高级搜索" trigger="click" style="width: 100%;">
						<el-form :inline="true" style="border-top: 1px solid #ddd;width: 100%;padding-top: 10px;">
							<el-form-item label="搜索内容">
								<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="keyword"></el-input>
							</el-form-item>
							<el-form-item label="会员等级">
								<el-select v-model="levelId" placeholder="请选择会员分类" size="mini">
									<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="info" size="mini" @click="getMember">搜索</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="success" size="mini" plain>清空筛选条件</el-button>
							</el-form-item>
						</el-form>
						<el-button type="success" slot="reference" size="mini" plain>高级搜索</el-button>
					</el-popover>
				</el-form-item>
			</el-form>
		</div>
		<!-- 用户列表区域 -->
		<el-table :data="userlist" border size="small">
			<el-table-column label="会员" align="center">
				<template slot-scope="scope">
					<div class="users">
						<div>
							<el-image :src="scope.row.avatar" style="width: 50px;" />
						</div>
						<div>
							<p>{{scope.row.username}}</p>
							<p>用户id: {{scope.row.id}}</p>
						</div>
						<div>
							<el-button type="text" size="mini">
								<span style="color: teal">详情</span>
							</el-button>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="会员等级" prop="user_level.name" align="center"></el-table-column>
			<el-table-column label="登录注册" align="center">
				<template slot-scope="scope">
					<p>注册时间：{{scope.row.create_time}}</p>
					<p>登录时间：{{scope.row.update_time}}</p>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-button type="success" plain size="mini" v-show="scope.row.status == 1">启用</el-button>
					<el-button type="danger" plain size="mini" v-show="scope.row.status == 0">禁用</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="mini" color="red">
						<span style="color: teal">编辑</span>
					</el-button>
					<el-button type="text" size="mini" @click="removeMember(scope.row.id)">
						<span style="color: teal">删除</span>
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页器区域 -->
		<el-pagination
		  style="margin-top: 10px;"
		  @size-change="changeSize"
		  @current-change="changePage"
		  :current-page="page"
		  :page-sizes="[5, 10, 15, 20]"
		  :page-size="limit"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="totals">
		</el-pagination>
		
		<!-- 添加会员信息的弹框 -->
		<el-dialog title="添加会员" :visible.sync="addMemberBox">
		  <el-form :model="users" :rules="rules" ref="addMemForm" label-width="80px" class="addMem">
		    <el-form-item label="用户名" prop="username">
		      <el-input v-model="users.username" placeholder="用户名" size="small"></el-input>
		    </el-form-item>
			<el-form-item label="密码" prop="password">
			  <el-input v-model="users.password" placeholder="用户名" size="small"></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickname">
			  <el-input v-model="users.nickname" placeholder="用户名" size="small"></el-input>
			</el-form-item>
			<el-form-item label="头像">
			  <div style="width: 80px;">
				  <el-button icon="el-icon-plus" @click="addHeadImgBox = true" v-if="users.avatar == ''"></el-button>
				  <el-image :src="users.avatar" v-else/>
			  </div>
			</el-form-item>
			<el-form-item label="会员等级">
			  <el-select v-model="users.user_level_id" placeholder="请选择" size="mini" style="width: 240px;">
			  	<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
			  	</el-option>
			  </el-select>
			</el-form-item>
			<el-form-item label="手机" prop="phone">
			  <el-input v-model="users.phone" placeholder="手机号" size="small"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input v-model="users.email" placeholder="邮箱" size="small"></el-input>
			</el-form-item>
			<el-form-item label="状态">
			    <div>
			      <el-radio v-model="radio" label="1" border size="mini">启用</el-radio>
			      <el-radio v-model="radio" label="0" border size="mini">禁用</el-radio>
			    </div>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addMemberBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" size="mini" @click="addMember('addMemForm')">确 定</el-button>
		  </div>
		</el-dialog>
		
		<!-- 添加头像的弹框 -->
		<el-dialog title="添加头像" :visible.sync="addHeadImgBox" width="80%">
			<el-container>
			  <el-aside width="200px">
				  <el-menu default-active="0" class="el-menu-vertical-demo">
				  	<el-menu-item class="menuMsg" :index="index.toString()" @click="changeLeft(item.id)" v-for="(item,index) in classList" :key="index">
				  		<div><span slot="title">{{item.name}}</span></div>
				  		<el-dropdown @command="handleCommand">
				  			<span class="el-dropdown-link">
				  				{{item.images_count}}<i class="el-icon-arrow-down el-icon--right"></i>
				  			</span>
				  			<el-dropdown-menu slot="dropdown">
				  				<el-dropdown-item :command="{type:'edit', obj:item}">修改</el-dropdown-item>
				  				<el-dropdown-item :command="{type:'del', id:item.id}">删除</el-dropdown-item>
				  			</el-dropdown-menu>
				  		</el-dropdown>
				  	</el-menu-item>
				  	<el-menu-item class="asidePage">
				  		<!-- 分页器区域 -->
				  		<el-button size="mini">上一页</el-button>
				  		<el-button size="mini">下一页</el-button>
				  	</el-menu-item>
				  </el-menu>
			  </el-aside>
			  <el-main>
				  <el-row class="rowBox" :gutter="20">
				    <el-col :span="4" v-for="(item,index) in imageList" :key="index" style="padding-bottom: 10px;">
				      <el-card class="checkCart" :body-style="{ padding: '0px' }" shadow="hover">
				  	  <input class="checkBox" type="checkbox" v-model="ids" :value="item.id"></input>
				        <img :src="item.url" class="image">
				  	  <div class="imageName">{{item.name}}</div>
				        <div style="padding: 14px;">
				          <div class="bottom clearfix">
				  			<el-button-group>
				  			  <el-button class="btnGroup" size="mini" icon="el-icon-view"></el-button>
				  			  <el-button class="btnGroup" size="mini" icon="el-icon-edit"></el-button>
				  			  <el-button class="btnGroup" size="mini" icon="el-icon-delete"></el-button>
				  			</el-button-group>
				          </div>
				        </div>
				      </el-card>
				    </el-col>
				  </el-row>
			  </el-main>
			</el-container>
			<!-- <div slot="footer" class="dialog-footer">
			  <el-button @click="addHeadImgBox = false" size="mini">取 消</el-button>
			  <el-button type="primary" size="mini">确 定</el-button>
			</div> -->
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: [],
		components: {},
		data() {
			return {
				keyword: "", // 搜索的关键字
				page: 1, // 当前页数
				limit: 5, // 每页形式的条数
				totals: 0, // 总条数
				levelId: "", // 等级ID 
				userlist: [], // 会员列表数据
				userlevel: [], // 会员等级数据
				// 添加会员必备参数
				users: {
					username: "",
					password: "",
					nickname: "",
					avatar: "",
					user_level_id: "",
					phone: "",
					email: "",
					status: 1
				},
				addMemberBox: false, // 控制添加会员的弹框
				addHeadImgBox: false, // 控制添加头像的弹框
				// 状态
				radio: "",
				cid: "", // 相册分类的id
				classList: [], // 相册分类的数据
				imageList: [], // 图片的数据
				// 验证规则
				rules: {
					username: [
						 { required: true, message: '请输入用户名', trigger: 'blur' },
						 // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					nickname: [
						{ required: true, message: '请输入昵称', trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: 'blur' }
					],
					email: [
						{ required: true, message: '请输入邮箱', trigger: 'blur' }
					],
				}
			};
		},
		created() {

		},
		mounted() {
			// 获取会员列表的数据
			this.getMember();
			// 获取相册的分类数据】
			this.getImageClass();
		},
		methods: {
			// 获取会员列表的数据
			getMember() {
				this.$axios.get(`/api/admin/user/${this.page}?limit=${this.limit}&keyword=${this.keyword}&user_level_id=`).then(res => {
					console.log(res);
					// 用户列表数据
					this.userlist = res.data.list;
					// 用户等级数据
					this.userlevel = res.data.user_level;
					// 总条数
					this.totals = res.data.totalCount;
				})
			},
			// 添加用户信息的操作
			addMember() {
				this.$axios.post("/api/admin/user",this.users).then(res => {
					console.log(res);
					this.$message.success("添加成功");
					this.getMember();
					this.addMemberBox = false;
				}).catch(error => {
					this.$message.error(error.response.data.msg);
				})
			},
			// 删除会员的操作
			removeMember(id) {
				this.$confirm("您确定要删除该会员吗?","提示", {
					confirmButtonText: '确定删除',
				    cancelButtonText: '再想想',
				    type: 'warning'
				}).then(() => {
					// 请求删除的接口
					this.$axios.post(`/api/admin/user/${id}/delete`).then(res => {
						console.log(res);
						// 成功提示
						this.$message.success("删除成功");
						this.getMember();
					})
				}).catch(() => {
					// 取消的操作
					this.$message.error("您已经取消了删除的操作")
				})
			},
			// 获取图片分类的数据
			getImageClass() {
				this.$axios.get(`/api/admin/imageclass/${this.page}`).then(res => {
					console.log(res);
					this.classList = res.data.list;
					this.cid = res.data.list[0].id;
					this.getImageList();
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 点击左侧菜单栏进行切换图片
			changeLeft(id) {
				console.log(id);
				this.cid = id;
				this.page = 1;
				this.getImageList();
			},
			// 获取图片列表的数据
			getImageList() {
				this.$axios.get(
					`/api/admin/imageclass/${this.cid}/image/1`
				).then(res => {
					console.log(res);
					this.imageList = res.data.list;
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 分页的操作
			changeSize(size) {
				this.limit = size;
				this.getMember();
			},
			changePage(page) {
				this.page = page;
				this.getMember();
			}
		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

		.search {
			width: 100%;
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.users {
			display: flex;
			justify-content: space-between;
			align-items: center;

			p {
				margin: 0px;
				padding: 0px;
			}
		}
		.el-upload {
			border: 1px solid #ddd;
		}
		.addMem {
			width: 40% !important;
		}
	}
	// 添加图片左侧区域布局
	.el-aside {
		width: 100%;
		min-height: 500px;
		border: 1px solid #ddd;
	
		.el-menu {
			width: 100%;
			height: 572px;
			position: relative;
			border-right: none;
			.menuMsg {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.asidePage {
				width: 100%;
				background: #F0F0F0;
				position: absolute;
				bottom: 0px;
			}
		}
	}
	// 添加图片右侧区域布局
	.el-main {
		width: 100%;
		.btnGroup {
			padding: 7px 10px !important;
		}
		img {
			width: 100%;
			height: 150px;
		}
		.bottom {
			display: flex;
			justify-content: center;
		}
		.el-upload-dragger {
			width: 560px !important;
			height: 210px !important;
		}
		.imageName {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			font-size: 13px;
		}
		.checkCart {
			position: relative;
			.checkBox {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
</style>
